<template>
  <div class="box">
    <!-- 侧边 -->
    <aside class="cmenu">
      <h4><i class="circle"></i><span>快速导航</span></h4>
      <el-collapse v-model="activeNames" class="menu-list">
        <el-collapse-item v-for="(item, index) in cMenuList" :key="index" :name="index">
          <template slot="title">
            <div class="collapse-title">
              <h5><span>{{item.title}}</span></h5>
            </div>
          </template>
          <ul class="collapse-content">
            <li v-for="(citem, index2) in item.show_content" :key="index2" :class="{active: citem.active===true}" @click="handleChangeCItem(item, index2)">
              <span class="tit" :title="citem.key">{{citem.key_string || citem.key}}</span>
            </li>
          </ul>
          <div v-if="item.isMore" class="tools-box">
            <i class="show-more" :class="{'el-icon-minus': item.showMore,'el-icon-plus': !item.showMore}" @click="showMore(item)"></i>
          </div>
        </el-collapse-item>
      </el-collapse>
      <!-- no-data -->
      <div v-if="cMenuList.length<=0" class="no-data">
        <loading2 :emptyText="emptyText"/>
      </div>
    </aside>
    <div class="panel">
      <!-- 全部期刊 -->
      <JournalAll ref="journalAll" v-if="this.routeParam.page === 'all'"/>
      <!-- 单个期刊 -->
      <JournalItem ref="journalItem" v-if="this.routeParam.page === 'item'"/>
      <!-- 期刊详情 -->
      <JournalDetail ref="journalDetail" v-if="this.routeParam.page === 'detail'"/>
    </div>
  </div>
</template>

<script>
import JournalAll from './JournalAll'
import JournalItem from './JournalItem'
import JournalDetail from './JournalDetail'
export default {
  components: {
    JournalAll,
    JournalItem,
    JournalDetail
  },
  data() {
    return {
      routeParam: {},
      cMenuList: [
        {title: '按名称'},
        {title: '按年份'},
      ],
      ipi: 1,
      ips: 10,
      activeNames: [0, 1],
      moreNumber: 10,
      emptyText: 'loading',
      reportData: [],
      updateYear: true, // 是否需要更新年份聚合
    }
  },
  methods: {
    init() {
      let id = this.$route.params.id
      this.routeParam = JSON.parse(decodeURIComponent((id)))
      // 获取左侧名称聚合
      this.getReportSources()
      if (this.routeParam.page === 'all') {
        // 获取全部期刊
        this.getReportAllData()
      } else if (this.routeParam.page === 'item') {
        // 获取单个期刊
        this.getReportItemData()
      } else if (this.routeParam.page === 'detail') {
        this.getYearData()
      }
    },
    // 获取期刊报告栏目
    getReportSources() {
      this.$get(this.$Url.report.sources)
        .then(res => {
          let data = res.data
          let active_content = []
          let newData = [
            {key: '全部', active: false}
          ]
          data.forEach(v => {
            newData.push({
              key: v,
              active: false
            })
          })
          newData.forEach(v => {
            if (v.key === this.routeParam.source) {
              v.active = true
              active_content.push(v)
            }
          })
          let d = {
            title: '按名称',
            title_en: 'source',
            active_content,
            content: newData,
            show_content: newData.slice(0, this.moreNumber),
            toggle: true,
            isMore: newData.length > this.moreNumber,
            showMore: false
          }

          this.$set(this.cMenuList, 0, d)
        })
        .catch(err => {})
    },
    // 获取全部期刊
    getReportAllData() {
      let param = []
      let keys = Object.keys(this.routeParam)
      keys.forEach(v => {
        if (this.routeParam[v] !== '全部' && v !== 'page') {
          param[v] = this.routeParam[v]
        }
      })
      this.$post(this.$Url.report.periodicalReportAll, {
        ipi: this.ipi,
        ips: this.ips,
        types: '期刊报告',
        ...param
      }).then(res => {
        let data = res.data && res.data.data
        let pubdate = res.data && res.data.pubdate
        this.$refs.journalAll.init(data)
        // 年份
        if (this.updateYear) {
          let newPubdate = []
          pubdate.forEach(v => {
            newPubdate.push({
              key: v,
              active: false
            })
          })
          newPubdate.sort((a, b) => {
            return b.key - a.key
          })
          newPubdate = [
            {key: '全部'},
            ...newPubdate
          ]
          newPubdate.forEach(v => {
            if (v.key === this.routeParam.year) {
              v.active = true
            }
          })
          let d = {
            title: '按年份',
            title_en: 'year',
            active_content: [{key: this.routeParam.year}],
            content: newPubdate,
            show_content: newPubdate.slice(0, this.moreNumber),
            toggle: true,
            isMore: newPubdate.length > this.moreNumber,
            showMore: false
          }
          this.$set(this.cMenuList, 1, d)
        }
      }).catch(err => {})
      // reportJournalItem
    },
    // 获取单个期刊
    getReportItemData() {
      let param = []
      let keys = Object.keys(this.routeParam)
      keys.forEach(v => {
        if (this.routeParam[v] !== '全部' && v !== 'page') {
          param[v] = this.routeParam[v]
        }
      })
      this.$post(this.$Url.report.periodicalReport, {
        ipi: this.ipi,
        ips: 120,
        types: '期刊报告',
        ...param
      }).then(res => {
        let data = res.data
        let pubdate = res.data && res.data.pubdate
        this.$refs.journalItem.init(data)
        // 年份
        if (this.updateYear) {
          let newPubdate = [
            {key: '全部', active: false}
          ]
          pubdate.forEach(v => {
            newPubdate.push({
              key: moment(v.key).format('YYYY'),
              active: false
            })
          })
          newPubdate.forEach(v => {
            if (v.key === this.routeParam.year) {
              v.active = true
            }
          })
          let d = {
            title: '按年份',
            title_en: 'year',
            active_content: [{key: this.routeParam.year}],
            content: newPubdate,
            show_content: newPubdate.slice(0, this.moreNumber),
            toggle: true,
            isMore: newPubdate.length > this.moreNumber,
            showMore: false
          }
          this.$set(this.cMenuList, 1, d)
        }
      }).catch(err => {})
    },
    // 期刊详情下 获取年份信息
    getYearData() {
      this.$post(this.$Url.report.periodicalReport, {
        ipi: this.ipi,
        ips: this.ips,
        types: '期刊报告',
        source: this.routeParam.source
      }).then(res => {
        let data = res.data
        let pubdate = res.data && res.data.pubdate
        // 年份
        let newPubdate = [
          {key: '全部', active: false}
        ]
        pubdate.forEach(v => {
          newPubdate.push({
            key: moment(v.key).format('YYYY'),
            active: false
          })
        })
        newPubdate.forEach(v => {
          if (v.key === this.routeParam.year) {
            v.active = true
          }
        })
        let d = {
          title: '按年份',
          title_en: 'year',
          active_content: [{key: this.routeParam.year}],
          content: newPubdate,
          show_content: newPubdate.slice(0, this.moreNumber),
          toggle: true,
          isMore: newPubdate.length > this.moreNumber,
          showMore: false
        }
        this.$set(this.cMenuList, 1, d)
      }).catch(err => {})
    },
    // 展示更多
    showMore(item) {
      this.$set(item, 'showMore', !item.showMore)
      if (item.showMore) {
        this.$set(item, 'show_content', item.content)
      } else {
        this.$set(item, 'show_content', item.content.slice(0, this.moreNumber))
      }
    },
    // 筛选
    handleChangeCItem(item, index2) {
      let currentItem = item.content[index2]
      // 高亮选中
      item.content.forEach((v, i) => {
        if (i == index2) {
          this.$set(v, 'active', true)
          this.$set(item, 'active_content', [v])
        } else {
          this.$set(v, 'active', false)
        }
      })
      // 
      let obj = {
        // source: this.cMenuList[0].active_content[0].key,
        // year: this.cMenuList[1].active_content[0].key,
      }
      if (item.title_en === 'source') {
        if (currentItem.key === '全部') {
          obj['page'] = 'all'
          obj['source'] = '全部'
        } else {
          obj['page'] = 'item'
          obj['source'] = this.cMenuList[0].active_content[0].key
        }
        obj['year'] = '全部'
      } else {
        if (this.cMenuList[0].active_content[0].key === '全部') {
          obj['page'] = 'all'
        } else {
          obj['page'] = 'item'
        }
        obj['source'] = this.cMenuList[0].active_content[0].key
        obj['year'] = this.cMenuList[1].active_content[0].key
      }

      this.$router.push({
        name: this.$route.name,
        params: {
          id: encodeURIComponent(JSON.stringify(obj))
        }
      })
    },
  },
  watch: {
    '$route'(oldVal, newVal) {
      let oldParam = JSON.parse(decodeURIComponent((oldVal.params.id)))
      let newParam = JSON.parse(decodeURIComponent((newVal.params.id)))
      let id = this.$route.params.id
      let param = JSON.parse(decodeURIComponent((id)))
      this.routeParam = param
      
      if (oldParam.source === newParam.source) {
        this.updateYear = false
      } else {
        this.updateYear = true
      }

      if (this.routeParam.page === 'item') {
        this.getReportItemData()
      } else if (this.routeParam.page === 'all') {
        this.getReportAllData()
      } else if (this.routeParam.page === 'detail') {
        this.getYearData()
      }

      this.cMenuList[0].content.forEach(v => {
        if (v.key === this.routeParam.source) {
          v.active = true
        } else {
          v.active = false
        }
      })
      this.$set(this.cMenuList[0], 'active_content', [{key: this.routeParam.source}])
    },
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  display: flex;
  padding: .2rem;
  .cmenu {
    position: relative;
    width: 2.4rem;
    padding: .1rem 0;
    border-radius: 8px;
    box-sizing: border-box;
    margin-right: .2rem;
    background-color: $color2;
    h4 {
      position: relative;
      width: 100%;
      line-height: .4rem;
      padding-bottom: .1rem;
      border-bottom: 1px solid $color102;
      // font-family: SourceHanSansCN-Bold;
      font-size: .16rem;
      font-weight: normal;
      text-indent: -.1rem;
      text-align: center;
      color: $color47;
      .circle {
        position: relative;
        display: inline-block;
        width: .16rem;
        height: .1rem;
        margin-right: .1rem;
        margin-bottom: 0;
        vertical-align: middle;
        &:before {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          width: .1rem;
          height: .1rem;
          border-radius: 50%;
          background-color: $mainColor;
          content: '';
        }
        &:after {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 1;
          width: .1rem;
          height: .1rem;
          border-radius: 50%;
          background-color: $color48;
          content: '';
        }
      }
      span {
        vertical-align: middle;
      }
    }
    .menu-list {
      position: relative;
      padding: 0 .15rem;
      border: 0;
      ::v-deep {
        .el-collapse-item__header {
          border: 0;
          .el-collapse-item__arrow {
            // transform: rotate(90deg);
            transform: rotate(-90deg);
            &.is-active {
              transform: rotate(90deg);
            }
          }
        }
        .el-collapse-item__wrap {
          border: 0;
        }
      }
      .collapse-title {
        display: block;
        margin-bottom: .35rem;
        &:last-of-type {
          margin-bottom: 0;
        }
        h5 {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          line-height: .48rem;
          // font-family: SourceHanSansCN-Medium;
          font-weight: normal;
          font-size: .16rem;
          color: $color71;
          i {
            color: $color72;
            cursor: pointer;
          }
        }
      }
      .collapse-content {
        position: relative;
        // border-left: 1px solid $color102;
        transition: all .4s ease;
        &:before {
          position: absolute;
          top: 4%;
          left: 0;
          width: 1px;
          height: calc(92%);
          content: '';
          background-color: $color102;
        }
        .el-checkbox-group {
          ::v-deep {
            .el-checkbox {
              width: 100%;
            }
            .el-checkbox__label {
              display: inline-flex;
              align-items: center;
              justify-content: space-between;
              width: calc(100% - 24px);
            }
          }
        }
        li {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-left: .1rem;
          cursor: pointer;
          transition: all .1s ease-in-out;
          &:hover {
            background-color: $color46;
          }
          &.active {
            span {
              font-weight: bold;
              color: $mainColor !important;
            }
          }
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &.tit {
              line-height: .34rem;
              font-size: .14rem;
              color: $color73;
            }
            &.cont {
              max-width: 45%;
              padding: 0 .07rem;
              border-radius: 40px;
              font-size: .13rem;
              color: $color74;
              background-color: $color75;
            }
          }

        }
      }
      .tools-box {
        position: relative;
        display: flex;
        .show-more {
          display: inline-block;
          width: .2rem;
          height: .2rem;
          line-height: .2rem;
          // font-family: SourceHanSansCN-Light;
          font-size: .16rem;
          color: $color76;
          cursor: pointer;
          &:hover {
            color: $mainColor;
          }
        }
      }
    }
  }
  .panel {
    position: relative;
    // flex: 1;
    // width: 100%;
    width: calc(100vw - .4rem - 2.4rem - .2rem);
  }
  .no-data {
    line-height: .34rem;
    padding: .1rem .15rem 0;
  }
}
</style>